<template>
  <div class="page-home">
    <div class="layout">
      <div class="navbar-wrap">
        <div class="Navbarold">
          <nav>
            <div class="navbar-logo"></div>
            <div class="navbar-title">卖票猫</div>
            <div class="navbar-button">
              <div class="nav-btn">
                <img src="../assets/images/nav-button.png" alt="" />
              </div>
            </div>
          </nav>
        </div>
      </div>
      <div class="page-content">
        <section class="topbar">
          <div class="topbar-bg">
            <div class="city-entry">
              <span class="city-name" @click="toCityList">{{cityname==null?'广州':cityname}}</span>
              <i class="city-entry-arrow"></i>
            </div>
            <div class="switch-hot-default">
              <a href="#" :class="['hot-item', { 'active':navIndex==0}]" @click="chance(0)"><h2>热映</h2></a>
              <a href="#" :class="['hot-item', { 'active':navIndex==1}]"  @click="chance(1)"><h2>影院</h2></a>
              <a href="#" :class="['hot-item', { 'active':navIndex==2}]"  @click="chance(2)"><h2>待映</h2></a>
              <a href="#" :class="['hot-item','classic',{ 'active':navIndex==3}] "  @click="chance(3)"><h2>经典电影</h2></a>
            </div>
            <router-link custom to="/search" v-slot="{href, navigate, isActive}">
              <a :href="href" @click="navigate" :class="[isActive && 'router-link-active']" class="search-icon"></a>
            </router-link>
          </div>
        </section>
          <well-received v-if="navIndex==0"></well-received>
          <cinema-view v-if="navIndex==1"></cinema-view>
          <coming-view v-if="navIndex==2"></coming-view>
         <classic-movies  v-if="navIndex==3"></classic-movies>
      </div>
    </div>
    <bottom-tabs :index="0"></bottom-tabs>
  </div>
</template>

<script>
import WellReceived from "../components/WellReceived.vue"
import BottomTabs from '../components/BottomTabs.vue'
import ComingView from '../components/ComingView.vue'
import ClassicMovies from "../components/ClassicMovies.vue";
import CinemaView from "../components/CinemaView.vue";
import { ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
export default {
  components:{
        WellReceived,
        BottomTabs,
        ComingView,
        ClassicMovies,
        CinemaView,
    },
  setup() {
    const router=useRouter()
    const route=useRoute()

    let index= window.localStorage.getItem('navIndex')
    let navIndex =index==null?ref(0):ref(index)

    let chance =(i)=>{
    window.localStorage.setItem('navIndex',i)
       navIndex.value=i 
    }
    let cityname=ref(route.query.name)
    let toCityList=()=>{
      router.push({
        path:'/citylist'
      })
    }
    return{
      navIndex,
      cityname,
      chance,
      toCityList
    }
  },
};
</script>

<style lang="less">
.page-home {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    // 头部
    .navbar-wrap {
      width: 100%;

      .Navbarold {
        background-color: #e54847;
        height: 38px;
        padding: 6px;
        position: relative;
        overflow: hidden;

        & > nav {
          width: 100%;
          height: 100%;

          .navbar-logo {
            width: 26.7%;
            height: 38px;
            float: left;
          }

          .navbar-title {
            width: 44.9%;
            height: 38px;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 38px;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
          }

          .navbar-button {
            position: relative;
            width: 26.7%;
            height: 38px;
            float: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .nav-btn {
              width: 17px;
              height: 16px;
              margin-right: 6px;
              text-align: right;

              & > img {
                width: 17px;
                height: 16px;
                display: block;
              }
            }
          }
        }
      }
    }

    // 内容
    .page-content {
      flex: auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin-bottom: 50px;

      .topbar {
        border-bottom: 1px solid #e6e6e6;
        height: 45px;
        line-height: 45px;
        z-index: 100;
        background-color: #fff;

        .topbar-bg {
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #fff;

          .city-entry {
            padding-left: 15px;
            font-size: 15px;
            color: #666;
            display: flex;
            align-items: center;

            .city-name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 19.2vw;
            }

            .city-entry-arrow {
              width: 0;
              height: 0;
              border: 4px solid transparent;
              border-top-color: #b0b0b0;
              display: inline-block;
              margin-left: 4px;
              margin-right: 5px;
              margin-top: 5px;
            }
          }

          .switch-hot-default {
            display: flex;
            height: 44px;
            line-height: 44px;
            // position: relative;
            justify-content: space-around;

            .hot-item {
              color: #666;
              width: 40px;
              text-align: center;
              position: relative;
              margin: 0 1.33333333vw;

              & > h2 {
                font-size: 15px;
                font-weight: 700;
              }
            }

            .classic {
              width: 80px;
            }

            .active {
              color: #333;

              & > h2 {
                font-size: 17px;
              }

              &::after {
                content: "";
                display: block;
                position: absolute;
                bottom: 1px;
                left: 0;
                right: 0;
                margin: 0 auto;
                width: 20px;
                border-radius: 2px;
                height: 3px;
                background-color: #f03d37;
                transition: left 0.2s;
              }
            }
          }

          .search-icon {
            width: 20px;
            height: 20px;
            padding: 10px 15px 10px 10px;
            background: url(../assets/images/search-red.png) no-repeat;
            background-size: 20px;
            background-position: 10px;
          }
        }
      }

      .movie {
        overflow: hidden;
        flex: 1;
        position: relative;

        .page-wrap {
          display: block;
          height: 100%;
          width: 100%;
          overflow-y: scroll;
          position: absolute;

          .page {
            display: block;
            flex: auto;

            .top-rated {
              padding: 12px 15px;
              background-color: #fff;
              margin-bottom: 10px;

              .title {
                font-size: 14px;
                color: #333;
                margin: 0 0 12px;
              }

              .top-rated-list {
                overflow-x: scroll;
                white-space: nowrap;
                font-size: 0;

                .top-rated-item {
                  display: inline-block;
                  width: 85px;
                  overflow: hidden;
                  margin-right: 10px;

                  .poster {
                    width: 85px;
                    height: 115px;
                    position: relative;
                    margin-bottom: 6px;
                    background-color: #e1e1e1;
                    background-size: 100% 100%;

                    .wish-bg {
                      display: inline-block;
                      width: 100%;
                      height: 35px;
                      position: absolute;
                      bottom: 0;
                      background-image: linear-gradient(
                        -180deg,
                        rgba(77, 77, 77, 0),
                        #000
                      );
                    }

                    .score {
                      position: absolute;
                      left: 4px;
                      bottom: 4px;
                      color: #faaf00;
                      font-size: 11px;
                      font-weight: 600;

                      .rated-score {
                        color: #faaf00;
                        font-size: 11px;
                        font-weight: 600;
                      }
                    }
                  }

                  .name {
                    height: 19.5px;
                    line-height: 19.5px;
                    font-size: 13px;
                    color: #222;
                    margin: 0 0 3px;
                    font-weight: bold;
                  }
                }

                &::-webkit-scrollbar {
                  display: none;
                }
              }
            }

            .list-wrap {
              background-color: #f5f5f5;

              .item {
                display: block;
                padding-left: 15px;
                background-color: #fff;

                .main-block {
                  width: 100%;
                  position: relative;

                  .avatar {
                    width: 64px;
                    height: 95px;
                    margin-top: 12px;
                    position: relative;
                    float: left;

                    &::before {
                      content: "";
                      display: block;
                      position: absolute;
                      width: 46px;
                      height: 46px;
                      background-repeat: no-repeat;
                      background-size: contain;
                    }
                  }

                  .content-wrapper {
                    height: 90px;
                    max-height: 90px;
                    margin-left: 74px;
                    position: relative;
                    padding: 12px 14px 12px 0;

                    .content {
                      padding-right: 5px;
                      margin-right: 48px;

                      .movie-title {
                        height: 24px;
                        margin-bottom: 7px;
                        max-height: 24px;
                        line-height: 24px;

                        .title {
                          font-size: 17px;
                          font-weight: 700;
                          color: #333;
                          padding-right: 5px;
                          flex-shrink: 1;
                        }

                        .v2d {
                          width: 43px;
                          height: 14px;
                          background-image: url(../assets/images/v2dimax.png);
                        }
                      }

                      .detail {
                        box-sizing: border-box;
                        line-height: 1;
                        overflow: hidden;

                        .score {
                          .grade {
                            font-size: 15px;
                            font-weight: 700;
                            color: #faaf00;
                          }
                        }

                        .show-info,
                        .actor {
                          margin-top: 6px;
                          line-height: 15px;
                        }
                      }
                    }

                    .button-block {
                      font-size: 13px;
                      position: absolute;
                      right: 15px;
                      top: 0;
                      bottom: 0;
                      height: 27px;
                      margin: auto;

                      .btn {
                        width: 54px;
                        height: 28px;
                        background-color: #f03d37;
                        box-shadow: 0 0.04rem 0.04rem 0 rgb(240 61 55 / 15%);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        box-sizing: border-box;
                        cursor: pointer;
                        border-radius: 14px;

                        .fix {
                          color: #fff;
                          white-space: nowrap;
                          font-size: 13px;
                          font-weight: 500;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          &::-webkit-scrollbar {
            display: none;
          }
        }

        .n-hot {
          background-color: #f5f5f5;
        }

        .show {
          display: block;
          height: 100%;
        }
      }

      .hot-celebrities {
        background-color: #fff;
        margin: 10px 0;
        padding: 12px 15px;

        .title {
          font-size: 14px;
          color: #333;
          margin-bottom: 12px;
        }

        .hot-celebrities-list {
          overflow: scroll;
          white-space: nowrap;
          font-size: 0;

          .celebrity-item {
            display: inline-block;
            overflow: hidden;
            width: 85px;
            margin-right: 10px;

            .celebrity-img {
              width: 85px;
              height: 115px;
              display: block;
              margin-bottom: 6px;
            }

            .name {
              font-size: 13px;
              margin-bottom: 3px;
              color: #222;
              font-weight: bold;
            }
          }

          &::-webkit-scrollbar {
            display: none;
          }
        }
      }

      .hot-news {
        padding: 12px 15px;
        background-color: #fff;

        .title {
          font-size: 14px;
          color: #333;
          margin-bottom: 12px;
        }

        .hot-news-list {
          .news-item {
            & > a {
              & > p {
                height: 21px;
                line-height: 21px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 95%;
                font-size: 14px;
                margin: 14px 0;
                color: #333;
              }
            }
          }
        }
      }
    }
  }
}
</style>